import { GET_PNG_HREF } from "@conf";
import deleteIcon from "@icon/delete.svg";
import "./easy.less";
export default function ({
	id,
	margin = false,
	clickCards,
	rightClick,
	close,
}: {
	id: number | string;
	margin?: Boolean;
	clickCards?: Function;
	rightClick?: Function;
	close?: Function;
}) {
	switch (id) {
		case 98: // 换行
		case 99: // 间隔
			return (
				<p
					className=' mjccard flex whitespace-pre items-center justify-center border-solid border-2 rounded text-gray-400 border-gray-400 cursor-pointer'
					onClick={() => {
						clickCards && clickCards(id === 98 ? 0 : -1);
					}}>
					{id === 98 ? "换\n行" : "间\n隔"}
				</p>
			);
		case -1: // 间隔
			return <span className=''>[-]</span>;
		case 0: // 换行
			return (
				<>
					[/n]
					<br />
				</>
			);
		default: // 牌
			return (
				<div
					className={`relative h-12 w-min inline-block ${margin ? "mr-3" : ""} `}
					onClick={() => {
						clickCards && clickCards(id);
					}}
					onContextMenu={(e) => {
						if (!rightClick || !e) return;
						e.preventDefault();
						rightClick(id);
					}}>
					<img src={GET_PNG_HREF(id)} className='mjccard  h-full w-min select-none inline-block cursor-pointer' />
					{close && (
						<img
							onClick={(e) => {
								e.stopPropagation();
								close(id);
							}}
							src={deleteIcon}
							className=' w-6 h-6 delete absolute -right-2 -top-2 z-10'
						/>
					)}
				</div>
			);
	}
}
